<!--
- Author:  LiShibin.
- Date:    2017/9/21 0021.
- File:    index.
-->
<template>
  <mt-popup v-model="visible" position="bottom" style="width: 100%" class="mint-datetime">
    <mt-picker show-toolbar :slots="slots" @change="onValuesChange" class="mint-datetime-picker">
      <span class="mint-datetime-action mint-datetime-cancel" @click="visible = false;$emit('cancel')">取消</span>
      <span class="mint-datetime-action mint-datetime-confirm" @click="confirm">确定</span>
    </mt-picker>
  </mt-popup>
</template>

<script>
  import {Picker, Popup} from 'mint-ui'

  export default{
    props: {
      value: null
    },
    data() {
      return {
        visible: false,
        currentValue: null,
        slots: [
          {
            flex: 1,
            values: ['6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '1', '2', '3', '4', '5'],
            className: 'slot1',
            textAlign: 'right'
          }, {
            divider: true,
            content: '-',
            className: 'slot2'
          }, {
            flex: 1,
            values: ['00', '30'],
            className: 'slot3',
            textAlign: 'left'
          }
        ]
      }
    },
    components: {
      'mt-popup': Popup,
      'mt-picker': Picker
    },
    watch: {
      visible(val) {
        if (val) {
          this.$utils.addBodyFix() // 显示模态框，防止滚动模态框里的div时body也滚动
        } else {
          this.$utils.removeBodyFix()
        }
      },
      value(val) {
        this.currentValue = val
      }
    },
    mounted() {
      this.currentValue = this.value
      if (!this.value) {
        this.currentValue = ['6', '00']
      }
    },
    methods: {
      open() {
        this.visible = true
      },

      close() {
        this.visible = false
      },
      onValuesChange(picker, values) {
        this.currentValue = values
        let value = picker.$children.filter(child => child.currentValue !== undefined).map(child => child.currentValue)
        this.currentValue = value
      },
      confirm() {
        this.visible = false
        this.$emit('confirm', this.currentValue)
      }
    }
  }
</script>

<style>

</style>